<template>
  <div class="skin">
    <van-tabs v-model="active" animated>
      <van-tab title="皮肤近况">
        <div class="content">
          <ul>
            <li>
              <p>85</p>
              <span>综合得分</span>
            </li>
            <li>
              <p>油性</p>
              <span>出油情况</span>
            </li>
            <li>
              <p>蛋壳</p>
              <span>光滑度</span>
            </li>
            <li>
              <p>比较耐受</p>
              <span>耐受/敏感度</span>
            </li>
            <li>
              <p>中度</p>
              <span>黑眼圈</span>
            </li>
            <li>
              <p>无</p>
              <span>痘痘</span>
            </li>
            <li>
              <p>轻度</p>
              <span>黑头</span>
            </li>
            <li>
              <p>细致</p>
              <span>毛孔</span>
            </li>
          </ul>
          <!-- 检测记录说明 -->
          <section class="record">
            <p>根据05月27日-05月27日的一条检测记录生成</p>
            <!-- 问号 -->
            <div class="questionMark">
              <span>?</span>
            </div>
          </section>
        </div>
      </van-tab>
      <van-tab title="了解度32%">
        <div class="content">
          <img src="../../assets/images/understanding.png" alt="了解度" />
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Tab, Tabs } from "vant";
export default {
  data() {
    return {
      active: 0,
    };
  },

  components: {
    VanTab: Tab,
    VanTabs: Tabs,
  },
};
</script>

<style lang="less" scoped>
.skin {
  width: 688px;
  margin-left: 31px;
  margin-bottom: 90px;

  :deep(.van-tabs__wrap) {
    height: 80px;
    border-radius: 20px 20px 0 0;

    .van-tab {
      font-size: 28px;
      color: #5bc4c5;
      line-height: 80px;
      background: #d2f0f2;
    }

    .van-tab--active {
      background: #64c8c8;
      color: #fff;
    }

    .van-tabs__line {
      width: 42px;
      height: 4px;
      bottom: 21px;
      background-color: #fff;
    }
  }

  :deep(.van-tabs__content .van-tab__pane .content) {
    height: 321px;
    background: #eff9fa;
    border-radius: 0px 0px 6px 6px;

    img {
      width: 100%;
      height: 100%;
    }

    ul {
      display: flex;
      flex-wrap: wrap;
      width: 648px;
      margin-left: 20px;
      li {
        width: 162px;
        height: 130px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        p {
          font-size: 28px;
          line-height: 50px;
          color: #303030;
          font-weight: 600;
        }

        span {
          font-size: 24px;
          line-height: 40px;
          color: #646364;
        }
      }
    }

    .record {
      margin-top: 12px;
      display: flex;
      justify-content: center;
      align-items: center;

      p {
        font-size: 24px;
        line-height: 28px;
        color: #8b8b8b;
      }

      .questionMark {
        width: 28px;
        height: 28px;
        background: #b4b4b4;
        border-radius: 50%;
        margin-left: 10px;
        position: relative;

        span {
          color: #fff;
          font-size: 22px;
          line-height: 22px;
          position: absolute;
          left: 7px;
          top: 3px;
        }
      }
    }
  }
}
</style>
